<template>
  <div class="as-date-pick__header">
    <i class="el-icon-d-arrow-left"
       @click="changeYear"></i>
    <i class="el-icon-arrow-left"
       v-show="visibleType==='day'&&type!=='year'"
       @click="visible.changeMonth(-1)"></i>
    <span>
      <span class="year"
            v-show="visibleType==='year' || type==='year'">
        {{parseInt(visible.year/10)*10}} 年 - {{parseInt(visible.year/10)*10+11}} 年
      </span>
      <span class="year"
            v-show="!(visibleType==='year' || type==='year')"
            @click="$emit('update:visibleType','year')">{{visible.year}} 年</span>
      <span class="month"
            v-show="visibleType==='day'&&type!=='year'"
            @click="$emit('update:visibleType','month')">{{visible.month}} 月</span>
    </span>
    <i class="el-icon-arrow-right"
       v-show="visibleType==='day'&&type!=='year'"
       @click="visible.changeMonth(1)"></i>
    <i class="el-icon-d-arrow-right"
       @click="visible.changeYear(type==='year'||visibleType==='year'?10:1)"></i>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "AsDatePickHeader",
  props: { visible: Object, visibleType: String, type: String },
  data() {
    return {};
  },
  methods: {
    changeYear() {
      if (this.type === "year" || this.visibleType === "year") {
        this.visible.changeYear(-10);
      } else {
        this.visible.changeYear(-1);
      }
    }
  }
};
</script>
